<template>
  <div class="box">
    <div class="cartlist">
      <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft" />
      <div class="car" v-for="item in list" :key="item.id">
        <van-card :price="item.price" :title="item.title">
          <template #thumb>
            <div class="logo">
              <van-checkbox v-model="checked" :change="onchange"></van-checkbox>
              <van-image width="80" height="80" :src="item.img" />
            </div>
          </template>
          <template #num>
            <van-stepper v-model="item.num" :change="ondian"/>
          </template>
        </van-card>
      </div>
    </div>
    <van-submit-bar :price="0.00" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allchecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script setup>
import axios from "axios";
import { computed, ref } from "vue";
const checked = ref(false);

const list = ref([]);
axios.get("/getgwc").then((resp) => {
  console.log(resp);
  list.value = resp.data.list;
});

const allchecked = computed(() => [
  {
    get() {
      return list.value.every((item) => item.checked);
    },
    set(val) {
      list.value.forEach((item) => (item.val = val));
    },
  },
]);

const zongjia = computed(() => {
  const zongjia = 0;
  const xuanzhong = list.value.filter((item) => item.checked);
  zongjia = (list.num * list.price);
  return zongjia;
});

import fd from '@/utlis/index'
const ondian = fd((()=>{}))
</script>

<style lang='scss' scoped>
.logo {
  display: flex;
  justify-content: space-around;
}
</style>